<template>
  <div class="login-container">
    <div class="form-wrapper" ref="btn">
      <div class="banner">
        <h1>Hello, Friend!</h1>
        <p>Enter your personal details and start journey with us</p>
      </div>
      <div class="green-bg">
        <button type="button" @click="move">登录</button>
      </div>


      <el-form class="signup-form" :model="loginForm" :rules="rules" ref="FormRef">
        <h1>用户登陆</h1>
        <p>or use your email for registration</p>
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" :prefix-icon="User"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" type="password" :prefix-icon="Lock" show-password></el-input>
        </el-form-item>
        <el-button @click="login" :loading="loading">登陆</el-button>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { User, Lock } from '@element-plus/icons-vue';
import { ElNotification } from 'element-plus';
import { getTime } from '@/utils/time';
//引入用户相关的小仓库
import { useUserStore } from '@/stores/modules/user';
let useStore = useUserStore();
//获取路由器
import { useRouter, useRoute } from 'vue-router';
let $router = useRouter();

/* CSS滑动Dom操作逻辑 */
const btn = ref<HTMLElement>()
const move = () => btn.value?.classList.toggle('change')

//表单校验
const FormRef = ref()
const rules = {
  username: [
    { required: true, min: 5, max: 10, message: '账号长度至少六位', trigger: 'change' }
    // { trigger: 'change', validator: validatorUserName }
  ],
  password: [
    { required: true, min: 6, max: 15, message: '密码长度至少6位', trigger: 'change' }
    // { trigger: 'change', validator: validatorPassword }
  ]
}

//收集账号与密码的数据
let loading = ref(false);
let loginForm = reactive({ username: 'admin', password: '111111' })
const login = async () => {
  await FormRef.value.validate()
  loading.value = true
  try {
    await useStore.userLogin(loginForm)
    $router.push({ name: 'layout' || '/' })
    //登录成功提示信息
    ElNotification({
      type: 'success',
      message: '欢迎回来',
      title: `HI,${getTime()}好`,
      duration: 1000
    });
  } catch (err: any) {
    ElNotification({
      type: 'error',
      message: err.data
    })
  } finally { loading.value = false }
}

</script>

<style lang="scss" scoped>
.login-container {
  height: 100vh;
  width: 100%;
  background: url(../assets/image/login/background_01.jpg) no-repeat;
  background-size: cover;

  display: flex;
  justify-content: center;
  align-items: center;

  .form-wrapper {
    height: 40rem;
    width: 55rem;
    background-color: #eee;
    border-radius: 2rem;
    box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;

    .banner {
      position: absolute;
      top: 15%;
      left: 13rem;
      text-align: center;
      color: #fff;
      width: 30rem;
      z-index: 100;
      transition: left 0.8s cubic-bezier(0.19, 1, 0.22, 1);
      /* transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1); */
      opacity: 1;

      h1 {
        font-size: 3rem;
        margin-bottom: 3rem;
      }

      p {
        font-size: 1rem;
      }
    }



    .green-bg {
      height: 100%;
      width: 100%;
      background: linear-gradient(to right, #3ab19b, #4cbf91);
      position: relative;
      top: 0;
      left: 0;
      z-index: 50;
      transition: width 1.5s cubic-bezier(0.19, 1, 0.22, 1);

      button {
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translateX(-50%);
        width: 7rem;
        height: 3rem;
        background-color: transparent;
        border: 0.1rem solid #fff;
        border-radius: 3rem;
        text-transform: uppercase;
        letter-spacing: .3rem;
        color: #fff;
        cursor: pointer;
      }
    }


  }

  .form-wrapper.change .banner {
    left: -28rem;
    opacity: 0;
  }

  .form-wrapper.change .green-bg {
    width: 40%;
  }


  .signup-form {
    height: 100%;
    width: 68%;
    position: absolute;
    top: 0;
    left: 0rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 8rem 0;
    transition: left 1.5s cubic-bezier(0.19, 1, 0.22, 1);

    h1 {
      font-size: 2rem;
      color: #3aaf9f;
    }

    p {
      font-size: 1rem;
      color: #555;
      margin-bottom: 2rem;
    }

    button {
      width: 14rem;
      height: 3rem;
      background-color: #3aaf9f;
      border: none;
      border-radius: 2rem;
      text-transform: uppercase;
      letter-spacing: 0.1rem;
      color: #fff;
      margin-top: 1rem;
      cursor: pointer;
    }

    .el-form-item {
      height: 4rem;
      width: 20rem;
      // background-color: red;

      .el-input {
        height: 3rem;
      }
    }
  }

  .form-wrapper.change .signup-form {
    left: 20rem;
  }

}
</style>
